import React, {useCallback, useContext, useEffect, useState} from 'react'
import {LayoutProvider, useLayoutContext} from './components/ContextValue'
import {
  Box,
  Button,
  Slider as MuiSlider,
  SxProps,
  Typography,
} from '@mui/material'
import PromiseSample from './components/NiceModalText'
import NiceModal from '@ebay/nice-modal-react'

import CardCarousel from './components/Carousel'
import EchartsWrapper from './components/EchartsLine'

interface Props {
  children?: React.ReactNode
}

const Component1 = () => {
  const {data: layoutData, updateData} = useLayoutContext()
  console.log(layoutData, 'layoutData1')
  useEffect(() => {
    updateData?.('tokenName2', 1)
  }, [])
  return (
    <span>
      <Button
        onClick={() => {
          updateData?.('tokenName2', 1)
        }}
      >
        tokenName2
      </Button>
      <Typography>tokenName2:{layoutData.tokenName2}</Typography>
      <Typography>tokenName:{layoutData.tokenName}</Typography>
    </span>
  )
}

const Component2 = () => {
  const {data: layoutData, updateData} = useLayoutContext()
  console.log(layoutData, 'layoutData2')
  useEffect(() => {
    updateData?.('tokenName', 1)
  }, [])
  return (
    <span>
      <Button
        onClick={() => {
          updateData?.('tokenName', 2)
        }}
      >
        tokenName1
      </Button>
      <Button
        onClick={() => {
          updateData?.('tokenName2', 3)
        }}
      >
        tokenName2
      </Button>
      <Typography>tokenName2:{layoutData.tokenName2}</Typography>
      <Typography>tokenName:{layoutData.tokenName}</Typography>
    </span>
  )
}

const Component3 = () => {
  const {data: layoutData, updateData} = useLayoutContext()
  console.log(layoutData, 'layoutData1')
  useEffect(() => {
    updateData?.('tokenName', 6)
  }, [])
  return (
    <span>
      <Button
        onClick={() => {
          updateData?.('tokenName2', 71)
        }}
      >
        tokenName3
      </Button>
      <Typography>tokenName2:{layoutData.tokenName2}</Typography>
      <Typography>tokenName:{layoutData.tokenName}</Typography>
    </span>
  )
}

const Component4 = () => {
  const {data: layoutData, updateData} = useLayoutContext()
  console.log(layoutData, 'layoutData2')
  useEffect(() => {
    updateData?.('tokenName', 1)
  }, [])
  return (
    <span>
      <Button
        onClick={() => {
          updateData?.('tokenName', 5)
        }}
      >
        tokenName4
      </Button>
      <Button
        onClick={() => {
          updateData?.('tokenName2', 4)
        }}
      >
        tokenName5-2
      </Button>
      <Typography>tokenName2:{layoutData.tokenName2}</Typography>
      <Typography>tokenName:{layoutData.tokenName}</Typography>
    </span>
  )
}
export type LockDurationSliderProps = {
  value?: number
  onChange?: (
    event: Event,
    value: number | number[],
    activeThumb: number
  ) => void
  sx?: SxProps
}

const LockDurationSlider = ({value, onChange, sx}: LockDurationSliderProps) => {
  const [poolIndex, setPoolIndex] = useState<number>(0)
  const fontStyles: SxProps = {
    color: '#9FA39F',
    opacity: 0.7,
    fontFamily: 'Inter',
    fontWeight: 400,
    fontSize: 14,
    lineHeight: '20px',
    fontFeatureSettings: `'ss01' on, 'ss02' on, 'calt' off`,
  }

  const muiSliderStyles: SxProps = {
    width: 'calc(100% - 20px)',
    mb: 26,

    '& .MuiSlider-mark': {
      width: 20,
      height: 20,
      borderRadius: '50%',
      transform: 'translate(-10px, -50%)',
      bgcolor: '#626262',
      opacity: 1,
    },
    '& .MuiSlider-markActive': {
      bgcolor: '#fff',
    },
    '& .MuiSlider-thumb': {
      width: 28,
      height: 28,

      bgcolor: '#fff',
    },
    '& .MuiSlider-rail': {
      color: '#626262',
      opacity: 1,
    },
    '& .MuiSlider-track': {
      color: '#ffff',
    },
    '& .MuiSlider-valueLabelOpen': {
      bgcolor: '#ffff',
      color: '#121212',
    },
    '& .MuiSlider-markLabel': {
      mt: 2,
      ...fontStyles,
    },
    '.MuiSlider-markLabelActive:last-child': {
      color: '#9FA39F',
      fontWeight: 700,
    },
  }

  const marks = [
    {
      value: 0,
      label: '0°C',
    },
    {
      value: 20,
      label: '20°C',
    },
    {
      value: 37,
      label: '37°C',
    },
    {
      value: 100,
      label: '100°C',
    },
  ]

  function valuetext(value: number) {
    return `${value}°C`
  }
  function valueLabelFormat(value: number) {
    return `${value} %`
  }
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        px: 4,
        background: '#0c0c0c',
        ...sx,
      }}
    >
      <MuiSlider
        aria-label="Always visible"
        step={1}
        min={0}
        value={value}
        onChange={onChange}
        valueLabelFormat={valueLabelFormat}
        valueLabelDisplay="auto"
        sx={muiSliderStyles}
        marks={marks}
      />
    </Box>
  )
}

const ParentComponent = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  )
}

// 子组件
const ChildComponent = ({onClick}: {onClick: () => void}) => {
  console.log('ChildComponent 渲染')
  return <button onClick={onClick}>Click me</button>
}
const TestPage: React.FC = v => {
  const data = {name: '344231a4'}

  return (
    <>
      <LayoutProvider>
        <Component1 />
        -------
        <Component2 />
      </LayoutProvider>
      <LayoutProvider>
        <Component3 />
        -------
        <Component4 />
      </LayoutProvider>
      <NiceModal.Provider>
        <PromiseSample />
        <CardCarousel />
        <EchartsWrapper />
      </NiceModal.Provider>
      <LockDurationSlider />
      <ParentComponent />
    </>
  )
}

export default TestPage
